<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h2 class="sidebar-title">在线教育平台</h2>
        <el-button icon="el-icon-menu" class="toggle-btn" @click="toggleSidebar"></el-button>
      </div>
      <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          background-color="#0b1b33"
          text-color="#fff"
          active-text-color="#409EFF"
          :collapse="isSidebarCollapse"
          router
      >
        <el-menu-item index="/stuhome">
          <el-icon><menu /></el-icon>
          <span>全部课程</span>
        </el-menu-item>
        <el-menu-item index="/myclass">
          <el-icon><menu /></el-icon>
          <span>我的课程</span>
        </el-menu-item>
        <el-menu-item index="/question">
          <el-icon><folder /></el-icon>
          <span>提问</span>
        </el-menu-item>
        <el-menu-item index="/stuper">
          <el-icon><user /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="/grade">
          <el-icon><Document /></el-icon>
          <span>成绩查询</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 主内容区 -->
    <div class="main-content" :class="{ 'sidebar-collapse': isSidebarCollapse }">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item>成绩查询</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">我的成绩</h1>
      </div>

      <!-- 搜索筛选区 -->
      <el-card class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="学期">
            <el-select v-model="searchForm.semester" placeholder="请选择学期">
              <el-option label="2023 秋季学期" value="2023-autumn" />
              <el-option label="2024 春季学期" value="2024-spring" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>搜索
            </el-button>
            <el-button @click="resetSearch">
              <el-icon><Refresh /></el-icon>重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 成绩列表 -->
      <el-card class="grade-list-card">
        <el-table
            :data="gradeList"
            border
            stripe
            highlight-current-row
            row-key="id"
        >
          <el-table-column label="序号" type="index" width="60" />
          <el-table-column prop="courseName" label="课程名称" min-width="180" />
          <el-table-column prop="teacher" label="授课教师" width="120" />
          <el-table-column prop="score" label="成绩" width="100" />
          <el-table-column prop="credit" label="学分" width="80" />
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
  Menu,
  User,
  Document,
  Search,
  Refresh
} from '@element-plus/icons-vue'

// 侧边栏相关状态
const isSidebarCollapse = ref(false)
const activeMenu = ref('grade')
const toggleSidebar = () => {
  isSidebarCollapse.value = !isSidebarCollapse.value
}

// 搜索表单
const searchForm = reactive({
  semester: ''
})

// 成绩列表
const gradeList = ref([
  { id: 1, courseName: '前端开发基础', teacher: '李老师', score: 85, credit: 3 },
  { id: 2, courseName: '后端开发实践', teacher: '王老师', score: 90, credit: 4 },
  // 可添加更多模拟数据
])

// 处理搜索
const handleSearch = () => {
  console.log('搜索条件:', searchForm)
  // 这里可添加实际的搜索逻辑
}

// 重置搜索
const resetSearch = () => {
  searchForm.semester = ''
  // 这里可添加重置后的逻辑
}
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>